<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>歌曲PK评分页面</title>
    <style>
        .song-container {
            width: 600px;
            margin: 50px auto;
            font-family: "微软雅黑", sans-serif;
        }

        .song-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .song-lyric {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .toggle-btn {
            cursor: pointer;
            color: #0066cc;
            margin-bottom: 10px;
        }

        .score-list {
            list-style-type: disc;
            padding-left: 20px;
            display: none;
        }

        .score-item {
            margin-bottom: 8px;
        }

        .score-bar {
            display: inline-block;
            height: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            width: 100px;
            margin: 0 5px;
            overflow: hidden;
        }

        .bar-yellow {
            background-color: #ffcc00;
            height: 100%;
        }

        .bar-green {
            background-color: #33cc33;
            height: 100%;
        }

        .bar-red {
            background-color: #cc3333;
            height: 100%;
        }
    </style>
    <script>
        window.onload = function () {
            const toggleBtn = document.querySelector('.toggle-btn');
            const scoreList = document.querySelector('.score-list');
            toggleBtn.onclick = function () {
                if (scoreList.style.display === 'none') {
                    scoreList.style.display = 'block';
                    toggleBtn.innerHTML = '▼ 查看评分结果';
                } else {
                    scoreList.style.display = 'none';
                    toggleBtn.innerHTML = '▶ 查看评分结果';
                }
            }
        }
    </script>
</head>

<body>
    <div class="song-container">
        <div class="song-title">朋友</div>
        <div class="song-lyric">这些年一个人 风也过雨也走 有过泪有过错 还记得坚持甚么 真爱过才会懂 会寂寞会回首 终有你终有梦在心中……</div>
        <div class="toggle-btn">▶ 查看评分结果</div>
        <ul class="score-list">
            <li class="score-item">那一天：<div class="score-bar">
                    <div class="bar-yellow" style="width: 60%;"></div>
                </div>6分</li>
            <li class="score-item">向日葵：<div class="score-bar">
                    <div class="bar-green" style="width: 80%;"></div>
                </div>8分</li>
            <li class="score-item">紫罗兰：<div class="score-bar">
                    <div class="bar-red" style="width: 40%;"></div>
                </div>4分</li>
        </ul>
    </div>
</body>

</html>